import React, {Component} from 'react';
import './css/maizuo.css'
import Film from "./component/Film";
import Cinema from "./component/Cinema";
import Center from "./component/Center";

class App extends Component {

    state = {
        list: [{
            id: 1, name: "电影",
        }, {
            id: 2, name: "影院",
        }, {
            id: 3, name: "我的",
        }],
        currentIndex: 0
    }

    showContext() {
        switch (this.state.currentIndex) {
            case 0:
                return <Film/>
            case 1:
                return <Cinema/>
            case 2:
                return <Center/>
            default:
                return null
        }
    }

    changeActiveIndex(index) {
        this.setState({
            currentIndex: index
        })
    }

    render() {
        return (<div>
            {this.showContext()}
            <ul>
                {this.state.list.map((item, index) =>
                    <li onClick={() => this.changeActiveIndex(index)}
                        className={this.state.currentIndex === index ? 'active' : null}
                        key={item.id}>{item.name}
                    </li>)}
            </ul>
        </div>);
    }
}

export default App;